<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>regist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p>
                    2009/11/20
                    <br />
                </p>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="#">main</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>
                注册
            </h1>
            <form action="login.html" method="post">
                <table cellpadding="0" cellspacing="0" border="0"
                       class="form_table">
                    <tr>
                        <td valign="middle" align="right">
                            用户名:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" name="username" />
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            真实姓名:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" name="name" />
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            密码:
                        </td>
                        <td valign="middle" align="left">
                            <input type="password" class="inputgri" name="pwd" />
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            性别:
                        </td>
                        <td valign="middle" align="left">
                            男
                            <input type="radio" class="inputgri" name="sex" value="m" checked="checked"/>
                            女
                            <input type="radio" class="inputgri" name="sex" value="f"/>
                        </td>
                    </tr>

                    <tr>
                        <td valign="middle" align="right">
                            验证码:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" name="number" />
                        </td>

                        <td>
                            <!--从Vue中获取url属性-->
                            <img id="num" :src="url"/>
                            <!--									从Vue中调用名为getImage()的方法-->
                            <a href="javascript:;" @click="getImage">换一张</a>
                        </td>


                    </tr>
                </table>
                <p>
                    <input type="submit" class="button" value="Submit &raquo;" />
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            ABC@126.com
        </div>
    </div>
</div>
</body>
</html>
<!--vue导入-->
<script src="/ems_vue/js/vue.js"></script>
<!--异步请求导入-->
<script src="/ems_vue/js/axios.min.js"></script>
<script>
    <!--	vue实例-->
    var app = new Vue({
        //挂载作用域
        //从register.html中可得知，整个都是由wrap包裹起来
        //所以作用域传wrap进来即可
        el:"#wrap",
        //作用域中获取的数据
        data:{
            //定义一个属性url，用来存从后端取得的验证码数据
            //让页面调用这个属性，即可得到验证码图片
            url:"",
        },
        methods:{
            //用来更换验证码
            getImage(){
                this.getSrc();
            },

            //获取验证码，代码复用，便于调用
            getSrc(){
                var _this = this;
                //console.log("xxxx");
                //异步请求：请求验证码图片
                axios.get("http://localhost:8081/ems_vue/user/getImage?time="+Math.random()).then(res=>{
                    console.log(res.data);
                    //把图片赋给url属性
                    _this.url = res.data;
                });
            }
        },
        //页面创建之前进行处理
        //用来在页面创建前，请求获取验证码
        created(){
            //获取验证码
            this.getSrc();
        }
    })
</script>

